<template>
  <div class="demo">
    <Button type="primary" @click="handleClick()">Welcome! {{ count }}</Button>
  </div>
</template>

<script setup>
import { onMounted, inject, ref } from 'vue'
import { Message, ImagePreview } from '../plugins/iviewui/provider.keys'

const mes = inject(Message)
const preview = inject(ImagePreview)

onMounted(() => {
  console.log('demo iview ', mes)
})

const urlList = ref([
  'https://file.iviewui.com/images/image-demo-1.jpg',
  'https://file.iviewui.com/images/image-demo-2.jpg',
  'https://file.iviewui.com/images/image-demo-3.jpg',
  'https://file.iviewui.com/images/image-demo-4.jpg',
  'https://file.iviewui.com/images/image-demo-5.jpg',
  'https://file.iviewui.com/images/image-demo-6.jpg'
])

const count = ref(0)
function handleClick() {
  count.value += 1
  // mes.info(`${count.value}`)
  preview.show({ previewList: urlList })
}
</script>

<style lang="less" scoped>
.demo {
  color: @primary-color;
  font-size: @font-size;
  text-align: center;
  margin: 300px 0 0 0;
}
</style>
